<template>
    <div ref="totalFixRef" class="totalFix">
        <template v-if="isPc">
            <el-space wrap>
                <div class="mr20 flexR-FS-C">
                    <el-image class="image" :src="img18" fit="cover" />
                    <span>暂估合同总金额：</span>
                    <p><count-to-number class="big-money" :number="totalFixData.zghtjwy" /></p>
                </div>
                <div class="mr20 flexR-FS-C">
                    <el-image class="image" :src="img17" fit="cover" />
                    <span class="fz14">动态立项总金额：</span>
                    <p><count-to-number class="big-money" :number="totalFixData.dtjewy" /></p>
                </div>
                <div class="mr20 flexR-FS-C">
                    <el-image class="image" :src="img12" fit="cover" />
                    <span>项目合同总价：</span>
                    <span><count-to-number class="big-money" :number="detailData.xmhtzjwy" /></span>
                </div>
                <div class="mr20 flexR-FS-C">
                    <el-image class="image" :src="img13" fit="cover" />
                    <span>专业分包比例：</span>
                    <p><span class="big-money">{{ totalFixData.zyfbbl }}</span> %</p>
                </div>
                <div class="mr20 flexR-FS-C">
                    <el-image class="image" :src="img14" fit="cover" />
                    <span>专业与劳务分包比例：</span>
                    <p><span class="big-money">{{ totalFixData.zyylwfbbl }}</span> %</p>
                </div>
                <div class="mr20 flexR-FS-C">
                    <el-image class="image" :src="img16" fit="cover" />
                    <span>控制金额：</span>
                    <el-input v-model="totalFixData.kzje" class="kzje-input" type="number" :disabled="!isKzje"
                        placeholder="请输入">
                        <template #prepend><el-button :icon="isKzje ? Unlock : Lock" /></template>
                        <!-- <template #append>万元</template> -->
                    </el-input>
                </div>
                <div class="flexR-FS-C">
                    <template v-if="detailData.isEditable">
                        <el-button v-debounce="submit" type="primary" class="submit">提交</el-button>
                    </template>
                    <template v-if="!detailData.isEditable && detailData.isAuditable">
                        <el-button v-debounce="approve" type="primary" class="submit">审核</el-button>
                        <el-button v-debounce="reject" type="warning" class="submit">退回</el-button>
                    </template>
                </div>
            </el-space>
        </template>

        <template v-else>
            <div class="totalFix flexR-SB-C">
                <div class="flexC-FS-FS">
                    <div class="flexR-FS-C">
                        <span class="fz14">动态立项总金额：</span>
                        <count-to-number class="big-money" :number="totalFixData.dtjewy" />
                        <span class="wan" />
                    </div>
                    <p class="xiangqing" @click="handleChangeDrawer">查看详情</p>
                </div>

                <el-button type="primary" class="submit">提交</el-button>
            </div>

            <el-drawer v-model="drawer" direction="btt" class="drawerBox">
                <template #header>
                    <p class="drawer-title flexR-Cen">详情</p>
                </template>

                <template #default>
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <div class="detail-item flexR-SB-C">
                                <p class="flexR-FS-C">
                                    <el-image class="image" :src="img18" fit="cover" />
                                    <span>暂估合同总金额：</span>
                                </p>
                                <p>
                                    <count-to-number class="big-money" :number="totalFixData.zghtjwy" />
                                    <span class="wan" />
                                </p>
                            </div>
                        </el-col>
                        <el-col :span="24">
                            <div class="detail-item flexR-SB-C">
                                <p class="flexR-FS-C">
                                    <el-image class="image" :src="img12" fit="cover" />
                                    <span>项目合同总价：</span>
                                </p>
                                <p>
                                    <count-to-number class="big-money" :number="detailData.xmhtzjwy" />
                                    <span class="wan" />
                                </p>
                            </div>
                        </el-col>
                        <el-col :span="24">
                            <div class="detail-item flexR-SB-C">
                                <p class="flexR-FS-C">
                                    <el-image class="image" :src="img13" fit="cover" />
                                    <span>专业分包比例: </span>
                                </p>
                                <p>
                                    <span class="big-money">{{ totalFixData.zyfbbl }}</span>
                                    <span class="wan">%</span>
                                </p>
                            </div>
                        </el-col>

                        <el-col :span="24">
                            <div class="detail-item flexR-SB-C">
                                <p class="flexR-FS-C">
                                    <el-image class="image" :src="img14" fit="cover" />
                                    <span>专业与劳务分包比例：</span>
                                </p>
                                <p>
                                    <span class="big-money">{{ totalFixData.zyylwfbbl }}</span>
                                    <span class="wan">%</span>
                                </p>
                            </div>
                        </el-col>

                        <el-col :span="24">
                            <div class="detail-item flexR-SB-C">
                                <p class="flexR-FS-C">
                                    <el-image class="image" :src="img16" fit="cover" />
                                    <span>控制金额：</span>
                                </p>
                                <p>
                                    <el-input v-model="totalFixData.kzje" class="kzje-input"
                                        :disabled="!detailData.isFirstSubmit" placeholder="请输入">
                                        <template #prepend>
                                            <el-button :icon="detailData.isFirstSubmit ? Unlock : Lock" />
                                        </template>

                                        <!-- <template #append>万元</template> -->
                                    </el-input>
                                </p>
                            </div>
                        </el-col>
                    </el-row>
                </template>
            </el-drawer>
        </template>
    </div>
</template>

<script setup>
import { add, divide } from '@/utils/calculate'
import commonData from '@/hooks/commonData'
import { approveContractApi, rejectContractApi } from '@/api/contract'
import fileUploadData from '@/hooks/fileUpload'

const props = defineProps({
    remark: {
        type: String,
        default: ''
    }
})
const detailData = inject('detailData')
const detailsList = inject('detailsList')
const drawer = ref(false)

const isKzje = computed(() => detailData.value.isEditable && detailData.value.isFirstSubmit)

// 文件上传数据
const { fileProgressList } = fileUploadData()

const { getContractData, reload, Unlock, Lock, isPc, img12, img13, img14, img16, img17, img18 } = commonData()

const emits = defineEmits(['initHeight', 'submit'])
const totalFixRef = ref()
const totalFixData = reactive({})
const contractData = ref({})

onMounted(() => {
    contractData.value = getContractData()
    window.addEventListener('resize', fn1, true)
    fn1()
})

function fn1() {
    if (isPc.value) {
        setTimeout(() => {
            if (totalFixRef.value) {
                const height = totalFixRef.value.clientHeight + 20
                emits('initHeight', height)
            }
        }, 300)
    }
}

function handleChangeDrawer() {
    drawer.value = true
}

function submit() {
    // 当fileProgressList里面有数据的percent不为100时，提示文件正在上传中
    if (fileProgressList.value.length && fileProgressList.value.some(el => el.percent && el.percent >= 0 && el.percent < 100)) {
        ElMessage.warning('文件正在上传中，请稍后提交')
        return
    }

    if (totalFixData.kzje <= 0) {
        ElMessage.warning('控制金额不能小于0')
        return
    }

    if (totalFixData.kzje < totalFixData.dtjewy) {
        ElMessage.warning('控制金额不能小于动态立项总金额')
        return
    }

    emits('submit', totalFixData.kzje)
}

async function approve() {
    const { data } = await approveContractApi({
        uuid: contractData.value.contractInitiationUuId,
        remark: props.remark
    })
    if (data) {
        // 弹框提示审核成功
        ElMessage.success('审核成功')
        reload()
    }
}

async function reject() {
    const { data } = await rejectContractApi({
        uuid: contractData.value.contractInitiationUuId
    })
    if (data) {
        ElMessage.success('退回成功')
        reload()
    }
}

watch(() => detailsList.value, data => {
    totalFixData.kzje = detailData.value.kzje || 0
    if (data && data.length) {
        const zghtjwyList = [0]
        const dtjewyList = [0]
        const zyfbblList = [0]
        const zyylwfbblList = [0]
        data.forEach(el => {
            if (!(el.lxsyzl == 4 && el.lxStatus == 9)) {
                // 如果为销项就把钱减去
                const realZghtjwy = el.lxsyzl === 4 ? -el.zghtjwy : el.zghtjwy

                zghtjwyList.push(realZghtjwy);
                dtjewyList.push(el.lxsyzl === 4 ? -el.dtjewy : el.dtjewy);

                if (el.lxlx === 0) {
                    zyfbblList.push(realZghtjwy)
                    zyylwfbblList.push(realZghtjwy)
                } else if (el.lxlx === 1) {
                    zyylwfbblList.push(realZghtjwy)
                }
            }
        })
        // 计算暂估、动态总和
        totalFixData.zghtjwy = add.apply(null, zghtjwyList)
        totalFixData.dtjewy = add.apply(null, dtjewyList)

        // 专业分包比例
        const zyfbblTotal = add.apply(null, zyfbblList)
        totalFixData.zyfbbl = detailData.value.xmhtzjwy == 0 ? 0 : divide(zyfbblTotal, detailData.value.xmhtzjwy)

        // 专业与劳务分包比例
        const zyylwfbblTotal = add.apply(null, zyylwfbblList)
        totalFixData.zyylwfbbl = detailData.value.xmhtzjwy == 0 ? 0 : divide(zyylwfbblTotal, detailData.value.xmhtzjwy)
    }
}, {
    deep: true,
    immediate: true
})
</script>

<style scoped lang='scss'>
@import "./style.scss";

[data-mode="pc"] {
    .totalFix {
        width: 100%;
        padding: 18px 20px;
        position: fixed;
        left: 0;
        bottom: 20px;
        z-index: 1000;
        background-color: #fff;
        box-sizing: border-box;
        box-shadow: rgb(33 33 124 / 30%) 3px 0 13px 1px;
        font-size: 14px;
        letter-spacing: 1px;
        transition: all 3s;

        .mr20 {
            margin-top: 5px;
        }

        .image {
            width: 34px;
            margin-right: 5px;
        }

        .kzje-input {
            width: 200px;
            height: 30px;
        }

        .big-money {
            font-size: 16px;
            // color: #ff6430;
        }

        .submit {
            width: 97px;
            height: 35px;
            border-radius: 3px;
        }
    }
}

[data-mode="mobile"] {
    .totalFix {
        width: 100%;
        height: 70px;
        padding: 10px 15px;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 2001;
        background-color: #fff;
        box-sizing: border-box;
        box-shadow: rgb(41 41 43 / 30%) 3px 0 13px 1px;
        font-size: 14px;

        .image {
            width: 34px;
            margin-right: 5px;
        }

        .big-money {
            font-size: 14px;
            // color: #ff6430;
            margin-left: 3px;
        }

        .wan {
            font-size: 14px;
            display: inline-block;
            transform: scale(0.9);
            transform: scale(0.7);
            margin-top: 5px;
        }

        .xiangqing {
            margin-left: 20px;
            background: #f5f5f5;
            border-radius: 10px;
            padding: 3px 10px;
            font-size: 12px;
            color: #333;
            margin-top: 5px;
        }

        .submit {
            width: 97px;
            height: 33px;
            border-radius: 15px;
        }

        :deep(.el-drawer__header) {
            margin-bottom: 0;
        }

        :deep(.drawerBox) {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            bottom: 70px;
            height: 42% !important;
        }

        .drawer-title {
            width: 100%;
            font-size: 18px;
            color: #000;
        }

        .detail-item {
            font-size: 15px;
            margin-top: 15px;

            .image {
                width: 20px;
                margin-right: 10px;
            }

            .big-money {
                font-size: 15px;
                // color: #ff6430;
            }

            .kzje-input {
                width: 180px;
                height: 30px;
            }

            .wan {
                font-size: 15px;
                margin-top: 5px;
                margin-left: 5px;
            }
        }
    }
}
</style>

<style></style>
